<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	</head>
	<body>
		<canvas width="860px" height="600px" id="canvas" style="border:1px solid #FF0000">
		</canvas>
		<script>
			$("document").ready(function(){
				/**@const*/
				var CANVAS_WIDTH 	= 860;
				/**@const*/
				var CANVAS_HEIGHT	= 600;

				var STATE_LOADING 	= 1;
				var STATE_RUNNING	= STATE_LOADING + 1;
				var STATE_SAVE		= STATE_RUNNING + 1;

				var RESOUCE_PATH = "";

				var arrItems = [];
				arrItems.push({
					image 	: new Image(),
					x		: 0,
					y		: 0,	
					isReady	: false,
					isDrag	: false
				});
				arrItems.push({
					image 	: new Image(),
					x		: 0,
					y		: 0,	
					isReady	: false,
					isDrag	: false
				});
				var s_iCurrentX;
				var s_iCurrentY;
				$('#canvas').bind("mousedown",function(e){
					s_iCurrentX = e.pageX - $(this).offset().left;
					s_iCurrentY = e.pageY - $(this).offset().top;
					console.log('x:'+s_iCurrentX);
					console.log('y:'+s_iCurrentY);
					for(i in arrItems)
					{
						arrItems[i].isDrag = false;
					}
					for(var i = arrItems.length - 1; i >= 0; i--)
					{
						if( (arrItems[i].x < s_iCurrentX) &&
							((arrItems[i].x + arrItems[i].w) > s_iCurrentX) &&
							(arrItems[i].y < s_iCurrentY) &&
							((arrItems[i].y + arrItems[i].h) > s_iCurrentY)
						)
						{
							arrItems[i].isDrag = true;							
							break;
						}
					}
				});
				$('#canvas').bind("mousemove",function(e){
					for(i in arrItems)
					{
						if( arrItems[i].isDrag == true)
						{
							var deltaX = (e.pageX - $(this).offset().left)- s_iCurrentX;
							var deltaY = (e.pageY - $(this).offset().top)- s_iCurrentY;
							arrItems[i].x += deltaX;
							arrItems[i].y += deltaY;
							s_iCurrentX = e.pageX - $(this).offset().left;
							s_iCurrentY = e.pageY - $(this).offset().top;
						}
					}
				});
				$('#canvas').bind("mouseup",function(e){
					for(i in arrItems)
					{
						arrItems[i].isDrag = false;
					}
				});
				var context 	= $("#canvas")[0].getContext("2d");
				var s_iCount	= 0;
				var s_iCountLoading = 0;

				var s_iState	= STATE_LOADING;
				function loadResource()
				{
					if( !arrItems[s_iCountLoading].image.src )
					{
						console.log(arrItems[s_iCountLoading].image.src);
						arrItems[s_iCountLoading].image.src = RESOUCE_PATH + "footer_image_hover"+s_iCountLoading+".png";	
						arrItems[s_iCountLoading].image.onload = function()
						{
							arrItems[s_iCountLoading].w 		= this.width;
							arrItems[s_iCountLoading].h 		= this.height;
							arrItems[s_iCountLoading].isReady	= true;
							s_iCountLoading++;
						}
					}
				}
				function drawImages(ctx)
				{
					for(i in arrItems)
					{
						ctx.drawImage(arrItems[i].image,arrItems[i].x,arrItems[i].y);
						if( arrItems[i].isDrag )
						{
							ctx.strokeRect(arrItems[i].x,arrItems[i].y,arrItems[i].w+2,arrItems[i].h+2);
						}
					}
				}
				
				(function run(){
					s_iCount++;
					context.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
					switch(s_iState)
					{
						case STATE_LOADING:
							if( s_iCountLoading < arrItems.length)
							{
								loadResource();
							}
							else
							{
								s_iState = STATE_RUNNING;
							}
							context.strokeText("Loading"+s_iCount, 10, 50);
						break;
						case STATE_RUNNING:
							drawImages(context);
						break;
						case STATE_SAVE:
						break;
					}
					
					setTimeout(run,80);
				})();
			});
		</script>
	</body>
</html>